<template>
	<!--v-for='item in list'-->
	<div class="list" >
		<!--轮播图-->
			<!--<vswiper v-bind:listAfter='list'></vswiper>-->
			<div id="slide">  
		        <swiper :options="swiperOption"  ref="mySwiper" >  
		            <!-- 这部分放你要渲染的那些内容 -->  
		            <swiper-slide v-for="pic in list.CoverList"> 
		            	<img v-bind:src="pic.Pic" alt="图片" />
		            </swiper-slide>  
		            <!-- 这是轮播的小圆点 -->  
		            <div class="swiper-pagination" slot="pagination"></div>  
		        </swiper>  
		    </div>  
	
		<!--分类-->
		<div id="nav">
			<div class="nav_item"><img src="../../assets/img/1.jpg" alt="排行榜" /></div>
			<div class="nav_item"><img src="../../assets/img/2.jpg" alt="分类" /></div>
			<div class="nav_item"><img src="../../assets/img/3.jpg" alt="三江榜" /></div>
			<div class="nav_item"><img src="../../assets/img/4.jpg" alt="专题" /></div>
		</div>
		
		<!--轮播消息-->
		<div id="message">
			<div class="message_news">
				<img src="../../assets/img/laba.jpg" alt="喇叭" />
				<span>11</span>
			</div>
		</div>
		<!--书籍列表-->
		<div id="main_list" v-for="item in list.Group">
			<div class="title">
				<span>{{item.Title}}{{item.Direction}}</span>
			</div>
			
			<div class="book" v-for="books in item.Data" v-show="item.Direction==0?true:false">
				<img src="" alt="wu" />
				<div class="book_cell">
					<h4>{{books.BookName}}</h4>
					<p>{{books.Description}}</p>
					<div class="book_meta">
						<div class="book_meta_a">
							<span class="author">{{books.Author}}</span>
						</div>
						<div class="book_meta_i">
							<span>{{books.CategoryName}}</span>
							<span>{{books.BookStatus}}</span>
							<span>100万字</span>
						</div>	
					</div>
				</div>		
			</div>
			
			<div class="book2" v-show="item.Direction==0?false:true">
				1111111
			</div>
		</div>
		
		
		
		
	</div>
</template>

<script>	
//	import Swiper from './swiper';
	import { swiper, swiperSlide } from 'vue-awesome-swiper' 
	
	export default {  
    	props:['list'],
        components: {  
            swiper,  
            swiperSlide  
        },  
        data() {  
            return {  
                swiperOption: {  
                //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true  
                notNextTick: true,  
                pagination: '.swiper-pagination',  
                slidesPerView: 'auto',  
                centeredSlides: true,  
                paginationClickable: true,  
                spaceBetween: 30,  
                    onSlideChangeEnd: swiper => {  
                        //这个位置放swiper的回调方法  
                        this.page = swiper.realIndex+1;  
                        this.index = swiper.realIndex;  
                    }  
                }  
            }  
        },  
        //定义这个sweiper对象  
        computed: {  
            swiper() {  
              return this.$refs.mySwiper.swiper;  
            }  
        },  
        mounted () {  
            //这边就可以使用swiper这个对象去使用swiper官网中的那些方法  
            this.swiper.slideTo(0, 0, false);  
        }  
  
    }  
	
	
</script>

<style>
	
	
	/*#selectest{
		position:relative;
		width:100%;
	}*/
	#slide{
		width:100%;
		height:1.793103rem;
		background:cyan;
		border-style:none;
	}
	#slide img{
		width:100%;
		height:1.793103rem;
	}
	
	#nav{
		width:100%;
		display:flex;
		text-align:center;
		align-items: center;
	}
	#nav .nav_item {
		width:25%;
	}
	#nav .nav_item img {
		width:0.810344rem;
		height:1.431034rem;
	}
	#message{
		width:100%;
		/*text-align:center;*/
		/*text-align: justify;*/
	}
	#message .message_news{
		width:9.482758rem;
		height:0.534482rem;
		background-color:#f6f7f9;
		margin:0 auto;
		border-radius:0.25862rem;
		padding-left:0.275862rem;
	}
	#message .message_news img{
		width:0.310344rem;
		height:0.293103rem;
		vertical-align:middle;
	}
	#message .message_news span{
		line-height:0.534482rem;
	}
	#main_list{
		position: relative;
		width:100%;
		height:6.534482rem;
		padding:0 0 0 0.25862rem;
		background:white;
	}
	#main_list .title{
		height:0.913793rem;
		background-color:cornflowerblue;
	}
	/*#list .title span{
		display:inline-block;
		width:0.034482rem;
		height:0.25862rem;
		background:#d23642;
	}*/
	#main_list .book{
		width:100%;
		height:1.87931rem;
		/*text-align:center;*/
		border-bottom:solid 0.017241rem;
		border-color:#e3e4e6;
		padding:0.241379rem 0;
	}
	#main_list .book2{
		width: 100%;
		height: 3.017241rem;
	}
	#main_list .book img{
		width:1.034482rem;
		height:1.396551rem;
		margin-right:0.155172rem;
		vertical-align:top;
	}
	#main_list .book .book_cell{
		display:inline-block;
		width: 8.3rem;
		/*vertical-align:top;*/
	}
	#mian_list .book .book_cell h4{
		line-height: 0.241379rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size:0.241379rem;
	}
	#main_list .book .book_cell p{
		line-height: 0.32rem;
		font-size:0.224137rem ;
		margin-top: 0.241379rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	#main_list .book .book_cell .book_meta{
		position: relative;
		/*height:0.189655rem;*/
		font-size:0.189655rem;
	}
	#main_list .book .book_cell .book_meta .book_meta_a{
		display:inline-block;
		float: left;
	}
	#main_list .book .book_cell .book_meta .book_meta_i{
		/*position: absolute;*/
		display:inline-block;
		margin-right: 0;
		float: right;
	}
	
	#main_list .book .book_cell .book_meta .book_meta_i span{
		font-size: 0.1rem;
		border:0.017241rem solid black;
	}
</style>